<template>
    <div class="index">
        <div class="content">
            <img :src="image">
            <p class="title">盾联后台管理</p>
            <el-form ref="form" :model="form" label-width="80px"  :rules="rules">
                <el-form-item label="用户名" prop="user">
                    <el-input placeholder="请输入用户名" v-model="form.user">
                        <i slot="prefix" class="el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input placeholder="请输入密码" v-model="form.pass" show-password>
                        <i slot="prefix" class="el-icon-lock"></i>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button type="success" size="mini" @click="login">点击登录</el-button>
        </div>
    </div>
</template>

<script>
    import {login} from "../../network/login";
    export default {
        name: "index",
        data(){
            return{
                image:require('../../assets/image/logo.svg')
                ,form:{
                    user:"",
                    pass:""
                },
                rules:{
                    user:[
                        {
                            required:true, message: '请输入用户名', trigger: 'blur'
                        }
                    ],
                    pass: [
                        {
                            required:true, message: '请输入密码', trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods:{
            login(){
                this.$refs.form.validate(async v=>{
                    if(!v) return
                    let data={
                        account:this.form.user,
                        pwd:this.form.pass
                    }
                    let result = await login(data)

                    if(result.code==200){
                        this.$success('登录成功')
                        this.$router.push({
                            path:"/home"
                        })
                    }
                    else{
                        this.$error(result.msg)
                    }


                })


            }
        }
    }

</script>

<style scoped lang="sass">
    .content
        color: #333
        margin:10vh auto
        text-align: center
        height: 400px
        width: 50vh
        .el-form
            margin-top: 6vh
        .title
            font-size: 24px

</style>